<template>

  <el-scrollbar height="100vh"  >
  <el-container class="layout-container-demo" style="height: 100vh" >
    <el-aside :width="sidebarWidth" v-model:collapsed="collapsed" :trigger="null" class="logo"
              style="height:100%; padding: 0;margin: 0;overflow-y: hidden;overflow-x: hidden;white-space: nowrap">
      <Logo class="logo" v-model:collapsed="collapsed"/>
      <el-scrollbar height="90vh">
        <Menu v-model:menus="menus" v-model:showPage="showPage" v-model:showMain="showMain" v-model:collapsed="collapsed" style="margin: 0;padding: 0;  "
              v-model:activeKey="activeKey"  v-if="menus!=null" />
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header style="padding: 0;margin: 0" class="logo">
        <Header  class="logo"     v-model:editableTabsValue="activeKey"  @logOff="logOff" v-model:loginUser="loginUser"  v-model:showMain="showMain" v-model:showPage="showPage" v-model:department="department" v-model:roles="roles"  v-model:activeKey="activeKey"  v-if="loginUser.value!=null" />
      </el-header>
      <el-main :style="{ margin: '0px 0px', padding: '0px', background: '#fff', minHeight: '280px' }" ref="appMain">
        <el-scrollbar height="100vh"  >
        <iframe  v-for="item of showMain" :src="item.menuRoute"  class="custom-scrollbar" v-show="item.show" scrolling="no"  frameborder="no"
        ></iframe>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
  </el-scrollbar>
</template>
<script lang="ts" setup>


import {ref,  watch, onMounted} from 'vue';
import request from "@/api/request"
import {useRouter} from 'vue-router'
import {ElLoading, ElMessage} from 'element-plus'
import Logo from '@/components/home/Logo.vue'
import Menu from '@/components/home/Menu.vue'
import Header from '@/components/home/Header.vue'
import {SET_POWER,SET_USERINFO} from '@/utils/localStorageUtil'

let $router = useRouter()
//菜单伸缩
let collapsed = ref(false);
//菜单信息
let menus = ref({});
//用户信息
let loginUser = ref({});

//缩放宽度
let sidebarWidth = ref('200px');
//所属部门
let department = ref({});
// 所属角色
let roles = ref({});
//显示菜单信息
let showPage = ref([]);
let showMain = ref([]);
//当前展示页id
let activeKey = ref();
//main
let appMain = ref();









onMounted(() => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  request.get('/getLoginUserInfo').then((res) => {
    let rdata = ref(res) as any;
    loading.close()
    if (rdata.value.code == '10000') {

      SET_USERINFO(rdata.value.data.loginUser.userName+"-"+rdata.value.data.loginUser.nickName);

      menus.value = ref(rdata.value.data.menus);
      loginUser.value = ref(rdata.value.data.loginUser);
      var powers=rdata.value.data.permissions;
      for (let i = 0; i < powers.length; i++) {
        SET_POWER(powers[i]);
      }

      department.value = ref(rdata.value.data.department);
      roles.value = ref(rdata.value.data.roles);
    } else {
      ElMessage.error(rdata.value.errorMessage)
      $router.push('/login')
    }
  })


})


watch(showPage, (newValue, oldValue) => {

  if (newValue.length > 0) {
    if (newValue.filter((tab) => tab.mainShow == true).length == 0) {

      // newValue[0].mainShow = true;
      newValue[newValue.length - 1].mainShow = true;
    }
    activeKey.value = newValue.find((tab) => tab.mainShow == true).menuId;
    showMain.value.forEach((item,index) => {
      if(item.menuId==activeKey.value){
        showMain.value[index].show=true;
      }
    })
  }

});


watch(collapsed, (newValue, oldValue) => {
  if (newValue) {
    sidebarWidth.value = '65px'
  } else {
    sidebarWidth.value = '200px'
  }
});




function logOff() {
  $router.push('/')
}

</script>
<style scoped>

.logo {
  background: #001529;

}

iframe {
  border: none;
  overflow: auto; /* 允许滚动 */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}

iframe::-webkit-scrollbar {
  display: none; /* 对于Chrome, Safari和Opera等Webkit浏览器隐藏滚动条 */
}


.custom-scrollbar {
  height: 99vh;
  width: 100%;
  padding: 0px;
  margin: 0;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}




.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* 设置滚动条的宽度 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条轨道的背景颜色 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滚动条的颜色 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置鼠标悬停时滚动条的颜色 */
}
</style>
